<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  getDepartmentInfo,
  delDepartmentInfo,
  addDepartmentInfo,
  upDataDepartmentInfo
} from "@/api/departmentApi";

import { ElMessage } from "element-plus";

//部门列表数据
const tableData = ref([]);
//请求初始条件
let queryData = ref({
  name: ""
});
//总条数
let total = ref(0);
//查询部门信息
function selectDepInfo() {
  getDepInfo(queryData.value);
}
//重置请求条件
function reset() {
  queryData.value = {
    name: ""
  };
  getDepInfo(queryData.value);
}
//
onMounted(() => {
  getDepInfo(queryData.value);
});
//发送请求数据
async function getDepInfo(queryData) {
  let res = await getDepartmentInfo(queryData);

  tableData.value = res.data;
  total.value = res.data.total;
  tableData.value = convertData();
}

// 转换函数
const convertData = () => {
  const resultMap = {};
  const resultArray = [];
  tableData.value.forEach(item => {
    const { id, parentId } = item;
    resultMap[id] = { ...item, children: [] };
    if (parentId === 0) {
      resultArray.push(resultMap[id]);
    } else {
      if (!resultMap[parentId]) {
        resultMap[parentId] = { children: [] };
      }
      resultMap[parentId].children.push(resultMap[id]);
    }
  });
  return resultArray;
};

//编辑
async function handleEdit(index, row) {
  changeDialogVisible.value = true;
  row1.value = row;
  addDep.value.name = row.name;
}
//删除
function handleDel(row) {
  centerDialogVisible.value = true;
  row1.value = row;
}
function handleAdd(row) {
  dialogOverflowVisible.value = true;

  addDep.value.pname = row.name;
}

const row1 = ref({
  createdAt: "",
  id: -1,
  isEnabled: "",
  name: "",
  parentId: -1
});
async function isDel() {
  centerDialogVisible.value = false;

  let res = await delDepartmentInfo(row1.value.id);
  if (res.code == 200) {
    ElMessage({
      message: res.msg,
      type: "success"
    });
  }
  getDepInfo(queryData.value);
}

async function isChange() {
  changeDialogVisible.value = false;

  row1.value.name = addDep.value.name;

  let res = await upDataDepartmentInfo(row1.value);
  if (res.code == 200) {
    ElMessage({
      message: res.msg,
      type: "success"
    });
  }
  getDepInfo(queryData.value);
}
//添加部门完成以后重置属性 关闭Dialog 执行
function close() {
  addDep.value = {
    pname: "",
    name: ""
  };
  row1.value = {
    createdAt: "",
    id: -1,
    isEnabled: "",
    name: "",
    parentId: -1
  };
}

const value1 = ref(true);
// 删除对话框
const centerDialogVisible = ref(false);
// 添加对话框
const dialogOverflowVisible = ref(false);
// 修改对话框
const changeDialogVisible = ref(false);
const value = ref("");

const addDep = ref({
  pname: "",
  name: ""
});

async function addDepInfo() {
  dialogOverflowVisible.value = false;
  let res = await addDepartmentInfo(JSON.stringify(addDep.value));
  if (res.code == 200) {
    ElMessage({
      message: res.msg,
      type: "success"
    });
  }
  getDepInfo(queryData.value);
}
function cancel() {
  dialogOverflowVisible.value = false;
  changeDialogVisible.value = false;
}
</script>

<template>
  <div>
    <div>
      <div style="height: 50px; margin-top: 20px; margin-left: 5px">
        <span>部门名称:</span>
        <el-input
          v-model="queryData.name"
          style="width: 240px; margin-right: 8px"
          placeholder="请输入"
        />
        <el-button type="primary" @click="selectDepInfo">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </div>
    </div>
    <div style="height: 50px; margin-top: 20px; float: right">
      <el-button type="primary" @click="dialogOverflowVisible = true"
        >添加</el-button
      >
    </div>
    <el-table
      stripe
      border
      :data="tableData"
      style="width: 100%"
      row-key="id"
      max-height="430"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="部门名称 " header-align="center" />
      <el-table-column
        prop="createdAt"
        label="创建时间"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="isEnabled"
        label="状态（开启/禁用）"
        header-align="center"
        align="center"
      >
        <template #default="{ row }">
          <el-switch
            v-model="row.isEnabled"
            inactive-value="1"
            active-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" header-align="center" align="center">
        <template #default="scope">
          <el-button size="small" @click="handleAdd(scope.row)">
            添加
          </el-button>
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button size="small" @click="handleDel(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--删除部门信息 -->
    <el-dialog
      v-model="centerDialogVisible"
      title="删除部门信息"
      width="500"
      align-center
    >
      <span>确定要删除该信息吗</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="isDel"> 确定删除 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 添加部门信息 -->
    <el-dialog
      v-model="dialogOverflowVisible"
      title="添加"
      width="500"
      draggable
      overflow
      @close="close"
    >
      <span> 上级部门:</span>
      <el-input
        v-model="addDep.pname"
        style="width: 240px"
        placeholder="顶级部门"
        disabled
      />
      <br />
      <br />
      <span>部门名称:</span>
      <el-input
        v-model="addDep.name"
        style="width: 240px"
        placeholder="请输入..."
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="addDepInfo"> 确认添加 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑部门信息 -->
    <el-dialog
      v-model="changeDialogVisible"
      title="修改"
      width="500"
      draggable
      overflow
    >
      <span> 上级部门:</span>
      <el-input
        v-model="addDep.pname"
        style="width: 240px"
        placeholder="顶级部门"
        disabled
      />
      <br />
      <br />
      <span>部门名称:</span>
      <el-input
        v-model="addDep.name"
        style="width: 240px"
        placeholder="请输入..."
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="isChange"> 确定修改 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped></style>
